<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>考勤卡添加</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #1E9FFF;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #1E9FFF;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		.vs__dropdown-toggle {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			display: flex;
			padding: 0 0 4px;
			background: 0 0;
			border-radius: 4px;
			white-space: normal;
			width: 50%;
			background-color: #ffffff;
			height: 38px;
		}

		.vs__dropdown-menu {
			width: 50%;
		}
	</style>

</head>

<body>
	<br>

	<br>
	<div class="layui-row" id="vue-root">


		<div class="layui-form-item">
			<label class="layui-form-label">卡号</label>
			<div class="layui-input-block">
				<input name="cardnumber" v-validate="'required'" autocomplete="off" placeholder="请输入卡号"
					class="layui-input cardnumber" v-model="item.no">

			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">教师</label>
			<div class="layui-input-block">
				<v-select placeholder="请选择教师" label="name" :options="teachers" :reduce="item=>item.id"
					v-model="item.personId"></v-select>

			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="offer" @click="submit">立即提交</div>
				<div class="return" onclick="history.back()">取消</div>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue({
			el: '#vue-root',
			data: {
				item: {
					status: 1
				},
				url: '/pc/card',
				teachers: []
			},
			created: function () {
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('未知学校');
					throw '未知学校';
				}
				this.schoolId = schoolId;
				axios.get('/pc/teacher/all/' + schoolId).then(function (res) {
					this.teachers = res.data;
				}.bind(this));
			},
			methods: {
				submit: function () {
					if (!this.item.no) {
						alert('请填写卡号');
						return;
					}
					if (!this.item.personId) {
						alert('请选择完整');
						return;
					}
					axios.put('/pc/card/bind', toFormParams(this.item)).then(function () {
						alert('成功');
						history.back();
					});
				}

			}
		});


	</script>

</body>

</html>